import { McpServerImportModal } from "@renderer/components/business/mcp-server-import-modal";
import { Button } from "@renderer/components/ui/base/button";
import { FieldGroup, Input } from "@renderer/components/ui/base/field";
import { SearchField } from "@renderer/components/ui/base/search-field";
import { useMcpServers } from "@renderer/queries";
import { Plus, Search, Upload } from "lucide-react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { McpServerItem } from "./mcp-server-item";

export function McpServerList() {
  const { t } = useTranslation("translation", {
    keyPrefix: "settings.mcp-settings",
  });

  const navigate = useNavigate();
  const [searchTerm, setSearchTerm] = useState("");
  const [showImportModal, setShowImportModal] = useState(false);
  const { data: servers = [], isLoading } = useMcpServers();

  const filteredServers = servers.filter(
    (server) =>
      server.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
      server.description?.toLowerCase().includes(searchTerm.toLowerCase()),
  );

  const handleAddServer = () => {
    navigate("/settings/mcp-settings/add");
  };

  const handleImportServers = () => {
    setShowImportModal(true);
  };

  return (
    <div className="flex w-full flex-col gap-4">
      <div className="flex items-center justify-between">
        <h2 className="font-medium text-[#333333] text-lg dark:text-[#E6E6E6]">
          {t("title")}
        </h2>
        <div className="flex gap-2">
          <Button
            className="h-8 rounded-lg"
            intent="outline"
            onPress={handleImportServers}
          >
            <div className="flex items-center gap-1.5">
              <Upload className="h-4 w-4" />
              <span>{t("import-button")}</span>
            </div>
          </Button>
          <Button className="h-8 rounded-lg" onPress={handleAddServer}>
            <div className="flex items-center gap-1.5">
              <Plus className="h-4 w-4" />
              <span>{t("add-button")}</span>
            </div>
          </Button>
        </div>
      </div>

      <SearchField
        value={searchTerm}
        onChange={setSearchTerm}
        placeholder={t("search-placeholder")}
        className="w-full"
      >
        <FieldGroup className="bg-[#F5F5F5] dark:bg-[#1A1A1A]">
          <div className="ml-3">
            <Search className="h-4 w-4 text-muted-fg" />
          </div>
          <Input placeholder={t("search-placeholder")} />
        </FieldGroup>
      </SearchField>

      <div className="flex w-full flex-col gap-2 pb-4">
        {isLoading ? (
          <div className="py-8 text-center text-muted-fg">
            {t("server-list.loading")}
          </div>
        ) : filteredServers.length === 0 ? (
          <div className="py-8 text-center text-muted-fg">
            {searchTerm ? t("server-list.no-matches") : t("server-list.empty")}
          </div>
        ) : (
          filteredServers.map((server) => (
            <McpServerItem key={server.id} server={server} />
          ))
        )}
      </div>

      {/* Import Modal */}
      <McpServerImportModal
        isOpen={showImportModal}
        onOpenChange={setShowImportModal}
      />
    </div>
  );
}
